apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/page.tsx (1)

445-479: Placeholders for Deployments, Resources, and Policies
These placeholders are well-labeled, providing a clear location for future data. Ensure that you eventually integrate real, dynamic data for these tabs to keep the user experience consistent across the entire environment overview.

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/_resources/page.tsx (2)

6-8: Consider updating function signature to align with other environment pages.

The function signature includes the workspaceSlug parameter, but in other files like resources/page.tsx, this has been simplified to only include environmentId. For consistency, consider following the same pattern.

export default async function ResourcesPage(props: {
-  params: Promise<{ workspaceSlug: string; environmentId: string }>;
+  params: Promise<{ environmentId: string }>;
}) {

---

16-19: Consider implementing consistent UI pattern.

The UI pattern here (using a simple div with container and margin classes) differs from the Card-based pattern used in the updated resources/page.tsx file. For consistency across environment pages, consider implementing the Card-based UI pattern.

return (
-  <div className="container m-8 mx-auto">
-    <EditFilterForm environment={environment} workspaceId={workspace.id} />
-  </div>
+  <Card>
+    <CardHeader>
+      <CardTitle>Resources</CardTitle>
+      <CardDescription>Resources managed in this environment</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <EditFilterForm environment={environment} workspaceId={workspace.id} />
+    </CardContent>
+  </Card>
);

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/policies/page.tsx (1)

3-7: Missing error handling for non-existent environment.

The function doesn't check if the environment exists after awaiting the params, unlike the previous implementation. While the error might be caught downstream in the PoliciesPageContent component, it's a good practice to handle this at the page level.

export default async function PoliciesPage(props: {
  params: Promise<{ environmentId: string }>;
}) {
  const { environmentId } = await props.params;
+  const environment = await api.environment.byId(environmentId);
+  if (environment == null) notFound();
  return <PoliciesPageContent environmentId={environmentId} />;
}

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/_components/EnvironmentTabs.tsx (1)

39-45: Consider optimizing tab change handler.

The current implementation has potentially redundant state updates. The tab change handler sets the active tab after navigation occurs, which might lead to unnecessary renders.

const onTabChange = (value: string) => {
+  setActiveTab(value);
  if (value === "overview") router.push(overviewUrl);
  if (value === "deployments") router.push(deploymentsUrl);
  if (value === "resources") router.push(resourcesUrl);
  if (value === "policies") router.push(policiesUrl);
-  setActiveTab(value);
};

Additionally, consider using a switch statement or object lookup for better readability and maintainability:

const onTabChange = (value: string) => {
  setActiveTab(value);
-  if (value === "overview") router.push(overviewUrl);
-  if (value === "deployments") router.push(deploymentsUrl);
-  if (value === "resources") router.push(resourcesUrl);
-  if (value === "policies") router.push(policiesUrl);
+  const urlMap = {
+    overview: overviewUrl,
+    deployments: deploymentsUrl,
+    resources: resourcesUrl,
+    policies: policiesUrl
+  };
+  router.push(urlMap[value as keyof typeof urlMap]);
};

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/resources/page.tsx (1)

11-24: Missing error handling for non-existent environment.

Similar to the PoliciesPage component, this page doesn't verify if the environment exists before rendering the content. Consider adding error handling to prevent rendering with an invalid environment ID.

export default async function ResourcesPage(props: {
  params: Promise<{ environmentId: string }>;
}) {
  const { environmentId } = await props.params;
+  const environment = await api.environment.byId(environmentId);
+  if (environment == null) notFound();
  return (
    <Card>
      <CardHeader>
        <CardTitle>Resources</CardTitle>
        <CardDescription>Resources managed in this environment</CardDescription>
      </CardHeader>
      <CardContent>
-        <ResourcesPageContent environmentId={environmentId} />
+        <ResourcesPageContent environmentId={environment.id} />
      </CardContent>
    </Card>
  );
}

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/overview/page.tsx (1)

433-485: Remove or clarify large commented code blocks.
This extensive commented-out section may cause confusion and code bloat. If it’s not used soon, consider removing it or moving these references into documentation or separate feature-flagged code paths.

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/deployments/EnvironmentDeploymentsPageContent.tsx (2)

80-138: Consider dynamic data fetching for deployments.
All deployment entries are static, which might become stale quickly. If these are placeholders, clarify in comments or plan for integration with a real API soon.

Would you like me to provide a stub for an async data-fetching mechanism or open a new issue for future implementation?

---

306-311: Leverage row selection logic for more user-friendly interactions.
You already have onClick={() => setSelectedDeployment(deployment)} on each row. Consider highlighting or focusing the row for clarity.

<TableRow
  key={deployment.id}
  className="cursor-pointer border-b border-neutral-800/50 hover:bg-neutral-800/20"
+ style={{ outline: selectedDeployment?.id === deployment.id ? '2px solid #4f46e5' : 'none' }}
  onClick={() => setSelectedDeployment(deployment)}
>

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/resources/ResourcesPageContent.tsx (2)

273-316: Consider fallback logic for filter conditions.
When resourceFilter.operator is "and" or "or", each condition is matched by exact string comparison. If value is empty or the condition type is unrecognized, resources pass through. You might want to handle incomplete or unknown filter conditions more explicitly.

---

550-554: Enhance accessibility in grid view.
Resource cards lack explicit interactive elements or ARIA attributes for accessibility. Consider adding focus, role, and label attributes so keyboard and screen-reader users can navigate effectively.

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/deployments/_components/DeploymentDetail.tsx (3)

13-16: Consider adding proper TypeScript typing for the deployment prop.

The deployment prop is typed as any, which loses type safety benefits. Consider creating a proper interface or type for the deployment object.

+interface DeploymentProps {
+  id: string;
+  name: string;
+  status: "success" | "pending" | "failed" | "running";
+  version: string;
+  deployedAt: Date;
+  duration: number | null;
+  resources: number;
+  initiatedBy: string;
+  successRate: number | null;
+}

 export const DeploymentDetail: React.FC<{
-  deployment: any;
+  deployment: DeploymentProps;
   onClose: () => void;
 }> = ({ deployment, onClose }) => {

---

20-46: Consider extracting complex conditional class logic.

The conditional class string construction is complex and repeated in multiple places. Consider extracting this pattern into a helper function for better maintainability.

+ const getStatusBackgroundClass = (status: string) => {
+   return status === "success"
+     ? "bg-green-500/10"
+     : status === "pending"
+       ? "bg-amber-500/10"
+       : status === "failed"
+         ? "bg-red-500/10"
+         : "bg-blue-500/10";
+ };

 <div
-  className={`-mx-6 -mt-6 mb-6 flex items-center justify-between px-6 py-4 ${
-    deployment.status === "success"
-      ? "bg-green-500/10"
-      : deployment.status === "pending"
-        ? "bg-amber-500/10"
-        : deployment.status === "failed"
-          ? "bg-red-500/10"
-          : "bg-blue-500/10"
-  }`}
+  className={`-mx-6 -mt-6 mb-6 flex items-center justify-between px-6 py-4 ${getStatusBackgroundClass(deployment.status)}`}
 >

---

208-217: Simplify complex class conditionals.

Multiple class determination conditionals are similarly complex. Consider simplifying the determination of class names based on status.

<div
 className={`absolute left-0 top-1 h-5 w-5 rounded-full ${
-  deployment.status === "success"
-    ? "border-2 border-green-500 bg-green-500/20"
-    : deployment.status === "failed"
-      ? "border-2 border-red-500 bg-red-500/20"
-      : deployment.status === "pending"
-        ? "border border-neutral-700 bg-neutral-800/80"
-        : "border-2 border-blue-500 bg-blue-500/20"
+  {
+    "success": "border-2 border-green-500 bg-green-500/20",
+    "failed": "border-2 border-red-500 bg-red-500/20",
+    "pending": "border border-neutral-700 bg-neutral-800/80",
+    "running": "border-2 border-blue-500 bg-blue-500/20"
+  }[deployment.status] || "border border-neutral-700 bg-neutral-800/80"
} flex items-center justify-center`}
>

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/deployments/EnvironmentDeploymentsPageContent.tsx (4)

173-237: Add loading states for summary metrics.

The summary cards display static data with no loading states. Consider adding loading states for these metrics when data is being fetched.

 <div className="mb-6 grid grid-cols-1 gap-4 md:grid-cols-4">
+  {isLoading ? (
+    Array(4).fill(0).map((_, i) => (
+      <div key={i} className="rounded-lg border border-neutral-800 bg-neutral-900/50 p-4">
+        <div className="h-4 w-24 animate-pulse rounded bg-neutral-800"></div>
+        <div className="mt-2 h-8 w-16 animate-pulse rounded bg-neutral-800"></div>
+      </div>
+    ))
+  ) : (

---

239-273: Add functionality to search and filter controls.

The search and filter controls are not functional. Implement event handlers to filter the deployments based on user input.

 <Input
   placeholder="Search deployments..."
   className="w-full pl-8 md:w-80"
+  onChange={(e) => {
+    const searchValue = e.target.value.toLowerCase();
+    // Filter deployments by search value
+  }}
 />

---

305-356: Add empty state for no deployments.

There's no handling for when the deployments array is empty. Consider adding an empty state message for better user experience.

 <TableBody>
+  {deployments.length === 0 ? (
+    <TableRow>
+      <TableCell colSpan={8} className="py-8 text-center text-neutral-400">
+        No deployments found
+      </TableCell>
+    </TableRow>
+  ) : (
   {deployments.map((deployment) => (
     // ...existing code
   ))}
+  )}
 </TableBody>

---

140-168: Consider using date-fns for consistent formatting.

The component defines its own time formatting functions (formatDuration and formatTimeAgo) while the imported DeploymentDetail component uses formatDuration from date-fns. Consider using date-fns consistently for all time formatting.

-const formatDuration = (seconds: number | null) => {
-  if (seconds === null) return "—";
-
-  if (seconds < 60) {
-    return `${seconds}s`;
-  } else if (seconds < 3600) {
-    const minutes = Math.floor(seconds / 60);
-    const remainingSeconds = seconds % 60;
-    return `${minutes}m ${remainingSeconds}s`;
-  } else {
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor((seconds % 3600) / 60);
-    return `${hours}h ${minutes}m`;
-  }
-};
+import { formatDuration as formatDurationFn, formatDistanceToNow } from "date-fns";
+
+const formatDuration = (seconds: number | null) => {
+  if (seconds === null) return "—";
+  
+  // Convert seconds to milliseconds for date-fns
+  return formatDurationFn({ seconds });
+};
+
+const formatTimeAgo = (date: Date) => {
+  return formatDistanceToNow(date, { addSuffix: true });
+};

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/deployments/_components/DeploymentDetail.tsx (3)

20-20: 🛠️ Refactor suggestion

Enhance modal accessibility.

The modal implementation lacks critical accessibility features.

-<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
+<div 
+  className="fixed inset-0 z-50 flex items-center justify-center bg-black/60" 
+  role="dialog" 
+  aria-modal="true"
+  onKeyDown={(e) => {
+    if (e.key === 'Escape') onClose();
+  }}
+>

---

52-53: ⚠️ Potential issue

Missing helper function definition.

The formatTimeAgo function is used but not defined within this component or imported.

+const formatTimeAgo = (date: Date) => {
+  const now = new Date();
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+  if (diffInSeconds < 60) return `${diffInSeconds} seconds ago`;
+  if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)} minutes ago`;
+  if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)} hours ago`;
+  if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / 86400)} days ago`;
+  return date.toLocaleDateString();
+};

 <p className="text-sm text-neutral-400">
   Deployed {formatTimeAgo(deployment.deployedAt)}
 </p>

---

55-55: ⚠️ Potential issue

Missing helper function definition.

The renderStatusBadge function is used but not defined within this component or imported.

+const renderStatusBadge = (status: string) => {
+  switch (status) {
+    case "success":
+      return (
+        <Badge variant="outline" className="border-green-500/30 bg-green-500/10 text-green-400">
+          Success
+        </Badge>
+      );
+    case "failed":
+      return (
+        <Badge variant="outline" className="border-red-500/30 bg-red-500/10 text-red-400">
+          Failed
+        </Badge>
+      );
+    case "pending":
+      return (
+        <Badge variant="outline" className="border-amber-500/30 bg-amber-500/10 text-amber-400">
+          Pending
+        </Badge>
+      );
+    default:
+      return (
+        <Badge variant="outline" className="border-blue-500/30 bg-blue-500/10 text-blue-400">
+          In Progress
+        </Badge>
+      );
+  }
+};

 <div>{renderStatusBadge(deployment.status)}</div>

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/policies/PoliciesPageContent.tsx (1)

37-63: Prefer fetching policy data dynamically.
Currently, environmentPolicy is hard-coded. For production use, consider fetching policy data from an API or configuration source so it remains accurate and maintainable over time.

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/deployments/_components/DeploymentDetail.tsx (1)

13-15: Consider using a more specific type for the deployment prop.

The component uses any for the deployment prop type, which loses type safety. Consider creating a proper interface or type for the deployment object.

+interface Deployment {
+  id: string;
+  name: string;
+  status: "success" | "failed" | "pending" | "running";
+  version: string;
+  deployedAt: Date;
+  duration: number;
+  resources: number;
+  initiatedBy: string;
+  successRate: number | null;
+}

-export const DeploymentDetail: React.FC<{
-  deployment: any;
-  onClose: () => void;
-}> = ({ deployment, onClose }) => {
+export const DeploymentDetail: React.FC<{
+  deployment: Deployment;
+  onClose: () => void;
+}> = ({ deployment, onClose }) => {

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/_components/EnvironmentTabs.tsx (1)

39-45: Consider refactoring the tab change handler for better maintainability.

The onTabChange function uses sequential if statements to handle each tab value. This approach works, but could be refactored to be more maintainable.

-  const onTabChange = (value: string) => {
-    if (value === "overview") router.push(overviewUrl);
-    if (value === "deployments") router.push(deploymentsUrl);
-    if (value === "resources") router.push(resourcesUrl);
-    if (value === "policies") router.push(policiesUrl);
-    setActiveTab(value);
-  };
+  const onTabChange = (value: string) => {
+    const urlMap: Record<string, string> = {
+      overview: overviewUrl,
+      deployments: deploymentsUrl,
+      resources: resourcesUrl,
+      policies: policiesUrl,
+    };
+    
+    router.push(urlMap[value] || overviewUrl);
+    setActiveTab(value);
+  };

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/resources/ResourcesPageContent.tsx (5)

821-826: Avoid direct DOM manipulation in React components.

Using document.getElementById is not recommended in React. Use React refs instead for accessing DOM elements.

- const typeSelect = document.getElementById(
-   "condition-type",
- ) as HTMLSelectElement;
- const valueSelect = document.getElementById(
-   "condition-value",
- ) as HTMLSelectElement;
+ // At the top of your component:
+ const typeSelectRef = useRef<HTMLSelectElement>(null);
+ const valueSelectRef = useRef<HTMLSelectElement>(null);
+
+ // And in the JSX where you render these elements:
+ <select
+   ref={typeSelectRef}
+   className="w-full rounded-md border border-neutral-700 bg-neutral-900 px-3 py-2 text-sm"
+   defaultValue="kind"
+   id="condition-type"
+ >
+
+ <select
+   ref={valueSelectRef}
+   className="w-full rounded-md border border-neutral-700 bg-neutral-900 px-3 py-2 text-sm"
+   id="condition-value"
+ >
+
+ // Then in your click handler:
+ const typeSelect = typeSelectRef.current;
+ const valueSelect = valueSelectRef.current;

---

38-39: Remove ESLint disable comment by fixing the dependency issue.

The ESLint disable comment for react-hooks/exhaustive-deps suggests there might be a dependency issue in a hook. Consider properly addressing the dependency issue rather than disabling the lint rule.

-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const resources = [
+  // Use useMemo to properly handle this value if it needs to be memoized
+  const resources = useMemo(() => [
   // ...resource array definition
-  ];
+  ], []); // Empty dependency array since this is static data

---

1-915: Consider breaking down this large component into smaller ones.

At over 900 lines, this component is quite large and could be challenging to maintain. Consider extracting logical sections into smaller, focused components:

1. ResourceSummaryCards
2. ResourceFilters
3. ResourceGrid
4. ResourceTable
5. FilterEditorModal

This refactoring would improve maintainability and reusability of the individual parts.

---

277-291: Add type definitions for conditions to improve code safety.

The filter conditions are using any type which can lead to type safety issues. Define proper interfaces for your filter conditions.

// Define these interfaces at the top of your file
interface FilterCondition {
  type: 'kind' | 'provider' | 'status' | 'component';
  operator: 'equals';
  not: boolean;
  value: string;
}

interface ResourceFilter {
  type: 'comparison';
  operator: 'and' | 'or';
  not: boolean;
  conditions: FilterCondition[];
}

// Then update your useState to use these types:
const [resourceFilter, setResourceFilter] = useState<ResourceFilter>({
  // ...existing implementation
});

// And update the any types in your filter functions:
resourceFilter.conditions.forEach((condition: FilterCondition) => {
  // ...
});

// And in your OR filter:
resourceFilter.conditions.some((condition: FilterCondition) => {
  // ...
});

Also applies to: 296-310

---

322-390: Extract renderResourceCard to a separate component for better reusability.

The renderResourceCard function is quite complex and would be better as a standalone component. This would improve separation of concerns and reusability.

// Create a separate component
const ResourceCard: React.FC<{ resource: Resource }> = ({ resource }) => {
  const statusColor = {
    healthy: "bg-green-500",
    degraded: "bg-amber-500",
    failed: "bg-red-500",
    updating: "bg-blue-500",
    unknown: "bg-neutral-500",
  };

  return (
    <div
      className="rounded-lg border border-neutral-800 bg-neutral-900/60 p-4 transition-all hover:border-neutral-700 hover:bg-neutral-900"
    >
      {/* Card content */}
    </div>
  );
};

// Then in your main component, replace the render call with:
{filteredResources.map((resource) => (
  <ResourceCard key={resource.id} resource={resource} />
))}

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/overview/CopyEnvIdButton.tsx (1)

1-33: Add error handling for clipboard operations.

The component works well for copying environment IDs to the clipboard. However, clipboard operations can fail in some browsers or contexts (e.g., permissions not granted).

Consider adding error handling:

 const copyEnvironmentId = () => {
-  navigator.clipboard.writeText(environmentId);
-  toast.success("Environment ID copied", {
-    description: environmentId,
-    duration: 2000,
-  });
+  navigator.clipboard.writeText(environmentId)
+    .then(() => {
+      toast.success("Environment ID copied", {
+        description: environmentId,
+        duration: 2000,
+      });
+    })
+    .catch((error) => {
+      console.error("Failed to copy: ", error);
+      toast.error("Failed to copy environment ID", {
+        duration: 2000,
+      });
+    });
 };

packages/api/src/router/environment-page/overview.ts (4)

1-3: Consider narrower imports from lodash for tree-shaking.

Currently importing the entire _ object might increase bundle size. If you only need specific methods (e.g., sumBy), importing them individually can help reduce final bundle size.

---

34-40: Clarify naming for deployedStatuses.

Including failure statuses under deployedStatuses can be confusing. Consider renaming to something more descriptive like relevantStatuses or trackedStatuses to better reflect its broader usage.

---

91-108: Consider indexing for better performance on status queries.

Since the query aggregates by job.status and orders by job.createdAt, adding a composite index on (status, createdAt) in the job table could improve performance when dealing with large volumes of deployments or resources.

---

169-189: Consider pagination for large deployments.

If an environment has a large number of deployments, mapping and aggregating each can become expensive. Consider adding pagination or limiting query scope to enhance performance and responsiveness.

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/overview/_components/CopyEnvIdButton.tsx (3)

12-18: Consider adding error handling for clipboard operations.

The navigator.clipboard.writeText() returns a Promise that should be handled to catch potential errors that might occur during clipboard operations, especially in environments with restricted permissions.

-  const copyEnvironmentId = () => {
-    navigator.clipboard.writeText(environmentId);
-    toast.success("Environment ID copied", {
-      description: environmentId,
-      duration: 2000,
-    });
-  };
+  const copyEnvironmentId = () => {
+    navigator.clipboard.writeText(environmentId)
+      .then(() => {
+        toast.success("Environment ID copied", {
+          description: environmentId,
+          duration: 2000,
+        });
+      })
+      .catch(err => {
+        toast.error("Failed to copy to clipboard", {
+          description: "Please try again or copy manually",
+          duration: 2000,
+        });
+      });
+  };

---

19-32: Button implementation is good, consider enhancing accessibility.

The button implementation prevents default behavior and has a title attribute for tooltips. However, adding an aria-label would improve accessibility for screen readers.

    <Button
      variant="ghost"
      size="icon"
      className="h-5 w-5 rounded-full hover:bg-neutral-800/50"
      onClick={(e) => {
        e.preventDefault();
        copyEnvironmentId();
      }}
      title="Copy environment ID"
+     aria-label="Copy environment ID"
    >

---

1-33: Consider adding a browser compatibility check for the Clipboard API.

The Clipboard API might not be supported in all browsers. A fallback mechanism would improve reliability.

"use client";

import React from "react";
import { IconCopy } from "@tabler/icons-react";

import { Button } from "@ctrlplane/ui/button";
import { toast } from "@ctrlplane/ui/toast";

export const CopyEnvIdButton: React.FC<{
  environmentId: string;
}> = ({ environmentId }) => {
+  const isClipboardSupported = () => {
+    return !!navigator.clipboard;
+  };
+
+  const fallbackCopyToClipboard = (text: string) => {
+    // Create a temporary textarea element
+    const textArea = document.createElement("textarea");
+    textArea.value = text;
+    
+    // Make it invisible
+    textArea.style.position = "fixed";
+    textArea.style.opacity = "0";
+    
+    document.body.appendChild(textArea);
+    textArea.select();
+    
+    try {
+      // Execute the copy command
+      const successful = document.execCommand("copy");
+      if (successful) {
+        toast.success("Environment ID copied", {
+          description: environmentId,
+          duration: 2000,
+        });
+      } else {
+        throw new Error("Copy command failed");
+      }
+    } catch (err) {
+      toast.error("Failed to copy to clipboard", {
+        description: "Please try again or copy manually",
+        duration: 2000,
+      });
+    } finally {
+      document.body.removeChild(textArea);
+    }
+  };

  const copyEnvironmentId = () => {
+    if (isClipboardSupported()) {
      navigator.clipboard.writeText(environmentId)
+        .then(() => {
+          toast.success("Environment ID copied", {
+            description: environmentId,
+            duration: 2000,
+          });
+        })
+        .catch(() => {
+          fallbackCopyToClipboard(environmentId);
+        });
+    } else {
+      fallbackCopyToClipboard(environmentId);
+    }
-    toast.success("Environment ID copied", {
-      description: environmentId,
-      duration: 2000,
-    });
  };
  
  // Rest of the component remains the same

This implementation provides a fallback using the older document.execCommand("copy") method which has broader browser support.

apps/webservice/src/app/[workspaceSlug]/(app)/(deploy)/(raw)/systems/[systemSlug]/(raw)/environments/[environmentId]/overview/_components/DeploymentTelemetryTable.tsx (5)

19-25: Consider defining colors with semantic meaning

The list of colors is currently defined without context. Consider using semantic naming to improve readability and maintainability.

-const colors = [
-  "bg-green-500",
-  "bg-blue-500",
-  "bg-red-500",
-  "bg-purple-500",
-  "bg-amber-500",
-];
+const versionColors = {
+  current: "bg-green-500",
+  previous: "bg-blue-500",
+  outdated: "bg-red-500",
+  experimental: "bg-purple-500",
+  unknown: "bg-amber-500",
+};
+
+// When version type isn't known, fall back to this array
+const fallbackColors = Object.values(versionColors);

---

40-46: Consider improving key usage in map function

Using index as a key in React's map function can lead to rendering issues when the list changes. Try to use a more stable identifier if available.

-{Object.values(versionDistro).map(({ percentage }, index) => (
+{Object.entries(versionDistro).map(([version, { percentage }], index) => (
  <div
-   key={index}
+   key={version}
    className={`h-full ${colors[index % colors.length]}`}
    style={{ width: `${percentage * 100}%` }}
  />
))}

---

117-149: Add empty state handling for deployments list

The component doesn't handle the case when no deployments are available. Consider adding an empty state message.

export const DeploymentTelemetryTable: React.FC<{
  deployments: SCHEMA.Deployment[];
}> = ({ deployments }) => {
  return (
    <div>
      <h4 className="mb-3 text-sm font-medium text-neutral-300">
        Deployment Versions
      </h4>
+     {deployments.length === 0 ? (
+       <div className="flex h-32 items-center justify-center rounded-lg border border-neutral-800/50 bg-neutral-900/50">
+         <p className="text-sm text-neutral-400">No deployments found</p>
+       </div>
+     ) : (
      <div className="overflow-hidden rounded-lg border border-neutral-800/50">
        <Table>
          <TableHeader>
            <TableRow className="border-b border-neutral-800/50 hover:bg-transparent">
              <TableHead className="w-[200px] py-3 font-medium text-neutral-400">
                Deployments
              </TableHead>
              <TableHead className="w-[300px] py-3 font-medium text-neutral-400">
                Current Distribution
              </TableHead>
              <TableHead className="w-[150px] py-3 font-medium text-neutral-400">
                Desired Version
              </TableHead>
              <TableHead className="py-3 text-right font-medium text-neutral-400">
                Deployment Status
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {deployments.map((deployment) => (
              <DeploymentRow key={deployment.id} deployment={deployment} />
            ))}
          </TableBody>
        </Table>
      </div>
+     )}
    </div>
  );
};

---

67-73: Consider making deployment status indicator dynamic

The green indicator dot appears to be hardcoded, but should likely reflect the actual deployment status.

<div className="flex items-center gap-2">
-  <div className="h-2 w-2 rounded-full bg-green-500"></div>
+  <div className={`h-2 w-2 rounded-full ${
+    deployment.status === "deployed" ? "bg-green-500" : 
+    deployment.status === "pending" ? "bg-amber-500" : 
+    deployment.status === "failed" ? "bg-red-500" : 
+    "bg-neutral-500"
+  }`}></div>
  <span className="text-sm text-neutral-200">{deployment.name}</span>
  <span className="text-xs text-neutral-400">
    ({isLoading ? "-" : resourceCount})
  </span>
</div>

---

54-63: Consider extracting telemetry data transformation to a utility function

To improve code maintainability, consider extracting the telemetry data transformation logic to a separate utility function.

For example, create a utility function:

const processTelemetryData = (telemetry: any | undefined, isLoading: boolean) => {
  return {
    resourceCount: telemetry?.resourceCount ?? 0,
    versionDistro: telemetry?.versionDistro ?? {},
    isLoading,
    isEmpty: Object.entries(telemetry?.versionDistro ?? {}).length === 0
  };
};

Then use it in your component:

- const resourceCount = telemetry?.resourceCount ?? 0;
- const versionDistro = telemetry?.versionDistro ?? {};
+ const { resourceCount, versionDistro, isEmpty } = processTelemetryData(telemetry, isLoading);

This makes the component more readable and the data transformation logic more testable.

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

packages/api/src/router/environment-page/overview/router.ts (2)

28-33: ⚠️ Potential issue

Add check for a non-existent environment.

If the ctx.db query returns no rows, environment will be undefined. Accessing environment.systemId or environment.resourceFilter would throw an error. Ensure the code verifies that environment is defined before proceeding.

- .then(takeFirst);
+ .then((env) => {
+   if (!env) {
+     throw new Error(`Environment with id: ${input} not found`);
+   }
+   return env;
+ });

---

103-108: ⚠️ Potential issue

Add validation for environment existence.

Similar to the previous issue, ensure that the environment exists before accessing its properties.

- .then(takeFirst);
+ .then((env) => {
+   if (!env) {
+     throw new Error(`Environment with id: ${environmentId} not found`);
+   }
+   return env;
+ });

packages/api/src/router/environment-page/overview/version-distro.ts (1)

16-67: Consider handling potential division by zero.

When calculating percentages, verify that the total is not zero to prevent potential division by zero errors.

  const total = _.sumBy(versionCounts, (v) => v.count);

  return Object.fromEntries(
    versionCounts.map((v) => [
      v.tag,
-     { count: v.count, percentage: v.count / total },
+     { count: v.count, percentage: total > 0 ? v.count / total : 0 },
    ]),
  );

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro